<template>
  <div>
    <el-card>
      <el-alert title="欢迎使用就爱商城后台管理系统" type="success" show-icon>
      </el-alert>
      <div
        id="Welcome"
        style="height: 500px; width: 100%; margin-top: 20px"
      ></div>
    </el-card>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initSomething()
  },
  methods: {
    initSomething () {
      var chartDom = document.getElementById('Welcome')
      var myChart = this.$echarts.init(chartDom)
      var option
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          data: ['服装', '食品', '鞋子', '美妆', '家居', '图书', '百度', '母婴', '零食', '其他']
        },
        series: [
          {
            name: '销售量',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1548, name: '食品' },
              { value: 775, name: '服装' },
              { value: 679, name: '医药保健', selected: true }
            ]
          },
          {
            name: '销售量',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 22,
                  align: 'center'
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 33
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4
                }
              }
            },
            data: [
              { value: 335, name: '服装' },
              { value: 1048, name: '食品' },
              { value: 310, name: '美妆' },
              { value: 251, name: '母婴' },
              { value: 234, name: '家居' },
              { value: 147, name: '零食' },
              { value: 135, name: '图书' },
              { value: 102, name: '其他' }
            ]
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }

}
</script>

<style scoped>
.title {
  text-align: center;
}
</style>
